<script lang="ts" setup>
import {useRoute} from "vue-router";

const route = useRoute();
const routeName = route.name;
</script>
<template>
  <div class="menu">
    <div :class="{activeIndex:routeName=='userSetup'}">
      <router-link :to="{ name: 'userSetup' }">账号设置</router-link>
    </div>
    <div :class="{activeIndex:routeName=='userComment'}">
      <router-link :to="{ name: 'userComment' }">我的评论</router-link>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.menu {
  display: flex;
  flex-direction: column;
  gap: 10px;

  div {
    text-align: center;
    line-height: 40px;
    background-color: #F5F5F5;
    width: 90%;

    a {
      text-decoration: none;
      color: #333;

      &:hover {
        color: #43A2FF;
        cursor: pointer;
      }
    }
  }

  .activeIndex {
    box-sizing: border-box;
    border-left: 3px solid #43A2FF;
  }
}
</style>